<template>
	<view class="sample-term-wrap">
		<view class="sample-term">
			<uni-file-picker style="width:77%;" :auto-upload="false" :value="submitDatas" fileMediatype="image"
				:del-icon="true" @select="selecta" @delete="deletea" />
			<view class="upload-button">
				<image class="icon" src="/static/camera.png"></image>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		uploadPhoto
	} from '@/network/humanFace.js';
	import uniFilePicker from '@/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue'
	export default {
		components: {
			uniFilePicker
		},
		props: {
			fileList: {
				type: Array,
				default: []
			}
		},
		watch: {
			fileList() {
				this.submitDatas = [...this.fileList];
			}
		},
		data() {
			return {
				submitDatas: [...this.fileList],
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		computed: {},
		mounted() {},

		methods: {
			selecta(val) {
				const tempFiles = JSON.parse(JSON.stringify(val.tempFiles));
				// 调用接口保存图片
				for (let i = 0; i < tempFiles.length; i++) {
					const file = JSON.parse(JSON.stringify(tempFiles[i]));
					uni.uploadFile({
						url: 'http://192.168.3.122:8070/shopFace/uploadPhoto', // 服务器接口地址
						filePath: file.url,
						name: 'file',
						header: {
							'Authorization': "Bearer " + uni.getStorageSync('token') //自定义请求头信息
						},
						formData: {
							file: file.name,
						},
						success: (uploadFileRes) => {
							const imgData = JSON.parse(uploadFileRes.data)
							const succImg = imgData.result;
							file.succImg = succImg;
							this.submitDatas = [...this.submitDatas, ...[file]];
							uni.showToast({
								title: '上传成功',
								icon: 'success',
								duration: 2000
							})
						},
						fail: (err) => {
							console.error('上传失败', err);
							uni.showToast({
								title: '上传失败',
								icon: 'success',
								duration: 2000
							})
						}
					});
				}
			},
			deletea(val) {
				this.submitDatas = this.submitDatas.filter((item) => {
					return item.uuid !== val.tempFile.uuid;
				});
			},
			getData() {
				return this.submitDatas;
			}
		}
	}
</script>

<style scoped>
	.sample-term-wrap {
		width: calc(100%-70rpx);
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.sample-term {
		position: relative;
		border-radius: 19rpx;
		/* background:#fff; */
		padding-top: 0rpx;
		/* 		box-shadow: 0px 5px 11px 2px rgba(0,0,0,0.16); */
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.upload-button {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 19rpx;
		background: #fff;
		box-shadow: 0px 5px 11px 2px rgba(0, 0, 0, 0.16);
	}

	::v-deep .uni-file-picker {
		height: 100rpx;
		width: 100%;
		overflow-x: scroll !important;
		overflow-y: hidden !important;
		border-radius: 19rpx;
		background: #fff;
		box-shadow: 0px 5px 11px 2px rgba(0, 0, 0, 0.16);
	}

	::v-deep .uni-file-picker__container {
		height: 100rpx !important;
		margin: 0 !important;
		width: max-content;
	}

	::v-deep .file-picker__box {
		width: 100rpx !important;
		padding-top: 100rpx !important;
		display: inline-block;
		float: left;
	}

	::v-deep .file-picker__box:last-child {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		opacity: 0;
	}

	/* ::v-deep .file-picker__box-content.is-add {
	display: none;
} */
	::v-deep .file-picker__progress {
		display: none;
	}

	::v-deep .icon-del-box {
		width: 15px;
		height: 15px;
	}

	/* ::v-deep .file-picker__box{
	width: 110rpx!important;
	height: 110rpx!important;
	padding-top: 0!important;
	position: relative;
}
::v-deep .is-add{
	position: absolute;
	right: 0;
	top: 0;
} */
	.icon {
		width: 64rpx;
		height: 64rpx;
	}
</style>